<template>
  <div >
    <el-table :data="hisTaskList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <template v-for="flowForm in props.row.flowFormList ">
                <template v-if="flowForm.fieldName=='extFormData' && flowForm.fieldValue!='' ">
                    <ep-tool-restore :formContent="JSON.parse(props.row.flowForm.formContent)" :formData="JSON.parse(flowForm.fieldValue)" show-all-task></ep-tool-restore>
                </template>

                <template v-if="flowForm.fieldName=='auditOption' && flowForm.fieldValue!='' ">
                  <el-form-item label="审批意见">
                    <span>{{ flowForm.fieldValue }}</span>
                  </el-form-item>
                </template>
                <template v-if="flowForm.fieldName=='auditResult' && flowForm.fieldValue!=''  ">
                  <el-form-item label="审批结果">
                    <span>{{ flowForm.fieldValue }}</span>
                  </el-form-item>
                </template>
                  
              </template>
            </el-form>
        </template>
      </el-table-column>
      <el-table-column label="任务 ID" prop="taskId"></el-table-column>
      <el-table-column label="任务名称" prop="taskName"></el-table-column>
      <el-table-column label="处理人" prop="taskOwner"></el-table-column>
      <el-table-column label="开始时间" prop="startTime"></el-table-column>
      <el-table-column label="结束时间" prop="endTime"></el-table-column>
    </el-table>

    <el-form>
      <template v-if="flowForm.formType==1">
         <ep-tool-restore ref="restore" :formContent="JSON.parse(flowForm.formContent)"  show-all-task></ep-tool-restore>
      </template>
      <template v-if="flowForm.formType==2">
        <el-form-item label="审核意见">
            <el-col :span="24">
              <el-input type="textarea" :rows="3" v-model="fixedForm.auditOption" ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="审核结果">
            <el-col :span="24">
              <el-radio v-model="fixedForm.auditResult"  label="1">通过</el-radio>
              <el-radio v-model="fixedForm.auditResult"  label="2">退回第一节点</el-radio>
              <el-radio v-model="fixedForm.auditResult"  label="3">退回上一节点</el-radio>
            </el-col>
        </el-form-item>
      </template>
      <!--
      <el-form-item v-for="(item) in dynamicFormList" :key="item.fieldName" :label="item.labelName" :value="item.fieldValue">
        <template>
          <el-input v-model="dynamicForm[item.fieldName]" autocomplete="off" size="mini"></el-input>
        </template>
      </el-form-item>
      -->

    </el-form>

    <div slot="footer">
       <el-button @click="saveTask();" type="primary">确定</el-button>
       <el-button @click="cancel();" type="primary">取消</el-button>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import { getTaskForm, getHisTask } from "./function";

export default {
  components: {
    
  },
  props: {
    taskId: null, 
    instanceId: null
  },
  data() {
    return {
      formShow: false,
      dynamicForm: {},
      dynamicFormList: [],
      flowForm: {},
      fixedForm: {
        auditOption: "",
        auditResult: "1"
      },
      hisTaskList: [],
      extFormData: {}
    };
  },
  watch: {
    taskId: {
      handler(v) {
        this.watchFdlIdHandle();
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    initData() {
      window.obj = {};
      this.dynamicForm = {};
      this.extFormData = {};

      let params = {
        taskId: this.taskId
      };
      getTaskForm(params).then(res => {
        if (res.retHead.code == "0000000") {
          this.flowForm = res.retBody;
        }
      });

      let hisParam = {
        instanceId: this.instanceId
      };
      getHisTask(hisParam).then(res => {
        if (res.retHead.code == "0000000") {
          this.hisTaskList = res.retBody;
        }
      });
    },
    watchFdlIdHandle() {
      this.initData();
    },
    /**
     * 提交
     */
    saveTask() {

      let param;
      // 自定义表单
      if(this.flowForm.formType==1){
        let data = this.$refs['restore'].submit();
        this.extFormData = JSON.stringify(data.content);
        param = {
          taskId: this.taskId,
          extFormData: this.extFormData
        }
      }
      // 固定表单
      else if(this.flowForm.formType==2){
        param = {
          taskId: this.taskId,
          auditOption: this.fixedForm.auditOption,
          auditResult: this.fixedForm.auditResult
        }
      }
      // 动态表单
      else if(this.flowForm.formType==3){
        param = {
          taskId: this.taskId,
          dynamicFormData: JSON.stringify(this.dynamicForm)
        }
      }

      this.$emit("dealTask", param);
    },
    cancel() {
      this.$emit("cancel");
    },
    deleteCancel() {},

    sizeChange(n) {
      this.pageSize = n;
      this.init();
    },
    currentChange(n) {
      this.currentPage = n;
      this.init();
    }
  }
};
</script>
<style>
/**
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
   */
</style>